<template>
    <div>
        <div class="contain">
            <div class="row">
                <label class="name">意见与反馈</label>
            </div>
            <div class="row text">
                <div>
                    <textarea v-model="opinion" maxlength="200" placeholder="客官，在这里说点什么吧 T_T" class="input"></textarea>
                    <label class="word-count">{{ word_count }}/200</label>
                </div>
            </div>
            <div class="row">
                <div>
                    <label class="name">请上传图片（选填）</label>
                    <label class="img-count">{{ img_count }}/3</label>
                </div>
                <label v-for="(item, index) in src" :key="index">
                    <img :src="item" class="img">
                </label>
                <label v-if="img_count < 3" @click="uploadPicture">
                    <img class="add-img" src="../../../static/images/addimage.png" alt="">
                </label>
            </div>
            <div class="row">
                <div class="name">微信号（选填）</div>
                <input v-model="wechat" class="wechat-input" maxlength="20" placeholder="客官要交流就留下温馨好吧T_T">
            </div>
        </div>
        <button @click="submmit">提交</button>
    </div>
</template>

<script>
import { post, showModel } from '../../util'
export default {
  data () {
    return {
      opinion: '',
      word_count: 0,
      src: [],
      img_count: 0,
      wechat: ''
    }
  },
  // 实时监控
  watch: {
    // 监控文字数量方法
    opinion () {
      this.word_count = this.opinion.length
    },
    // 监控图片数量方法
    src () {
      this.img_count = this.src.length
    }
  },
  methods: {
    uploadPicture () {
      // 微信api接口里this不指向vue实例，指向接口方法（chooseImage）
      // 先将this实例对象保存到that里
      let that = this
      wx.chooseImage({
        count: 3,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths
          that.src.push(tempFilePaths)
          console.log(that.src)
        }
      })
    },
    // 异步提交请求
    async submmit () {
      if (this.word_count > 0) {
        const data = {
          // 反馈意见
          opinion: this.opinion,
          // 照片,mysql里没有数组，需转换成字符串
          src: this.src.join(','),
          // 微信号
          wechat: this.wechat,
          // 用户id
          openid: wx.getStorageSync('userinfo').openId
        }
        // try里的代码错误，catch会捕捉到
        try {
          const res = await post('/weapp/createopinion', data)
          console.log(res)
          // 执行成功
          showModel('提交成功', '您的反馈已经交给开发者了T_T')
        } catch (e) {
          // 执行失败
          showModel('提交失败', '服务器异常, 请稍后再试！')
        }
      } else {
        console.log('111112')
        showModel('提交失败', '反馈信息不能为空')
      }
    }
  }
}
</script>

<style scoped>
    .contain {
        background: #ffffff;
        font-size: 16px;
    }
    .text {
        height: 110px;
    }
    .row {
        border-bottom: 1px solid #e8e8e8;
        padding: 5px 15px;
    }
    .name {
        width: 80%;
        height: 40px;
        line-height: 40px;
    }
    .input {
        width: 100%;
        height: 85px;
        font-size: 15px;
        padding-top: 5px;
    }
    .word-count {
        float: right;
        color: #808080;
    }
    .img-count {
        float: right;
        line-height: 40px;
        color: #808080;
    }
    .add-img {
        width: 80px;
        height: 80px;
    }
    .img {
        width: 80px;
        height: 66px;
        margin-bottom: 7px;
        margin-left: 10px;
    }
    .wechat-input {
        font-size: 15px;
    }
    
    button {
        margin: 20px auto;
        width: 90%;
        border-radius: 5px;
        background: #ea5149;
        font-size: 17px;
        color: #ffffff;
        font-weight: bold;
    }
</style>